<template>
  <div>
    <el-descriptions :border="true" :column="2">
      <el-descriptions-item label="设备主控ID">{{ id }}</el-descriptions-item>
      <el-descriptions-item label="注册状态">
        <div class="marker" :class="getDeviceRegisterStatusClassName(info.registerStatus)">
          {{ transformDisplayName(dict_deviceRegisterStatus, info.registerStatus) }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="注册类型">{{ transformDisplayName(dict_deviceRegisterType, info.type) }}</el-descriptions-item>
      <el-descriptions-item label="产品">{{ info.id }}</el-descriptions-item>
      <el-descriptions-item label="设备名">{{ info.id }}</el-descriptions-item>
      <el-descriptions-item label="设备统一ID">{{ info.id }}</el-descriptions-item>
      <el-descriptions-item label="注册日期">{{ format_dateTime(info.createTime) }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {
  transformDisplayName,
  dict_deviceRegisterStatus,
  dict_deviceRegisterType,
  DEVICE_REGISTER_STATUS_UNDO,
  DEVICE_REGISTER_STATUS_COMPLETE
} from '@/utils/dictionary'
import { format_null, format_dateTime } from '@/utils/formatter'

import { detailApi } from '@/api/modules/device/productionRecords'

export default {
  name: 'ProductionRecordsDetail',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      dict_deviceRegisterStatus,
      dict_deviceRegisterType,

      info: {
        id: null,
        registerStatus: null,
        type: null,
        createTime: null,
      }
    }
  },
  methods: {
    format_dateTime,
    transformDisplayName,

    async getDetail() {
      try {
        const params = {
          id: this.id
        }
        // const res = await detailApi(params)
        const res = {
          data: {
            id: 1,
            registerStatus: 0,
            type: 0
          }
        }
        this.info = format_null(res.data)
      } catch (err) {
        console.error(err)
      }
    },
    getDeviceRegisterStatusClassName(value) {
      if((value ?? '') !== '') {
        switch (+value) {
          case DEVICE_REGISTER_STATUS_UNDO: return 'marker-inactive'
          case DEVICE_REGISTER_STATUS_COMPLETE: return 'marker-active'
        }
      }
    },
  },
  mounted () {
    this.getDetail()
  }
}
</script>